import React, { Component } from 'react';
import { Progress, Tag, Badge, Space } from 'antd';
import moment from 'moment';
import { observer } from 'mobx-react';
import { observable, computed, action } from 'mobx';
import ProCard from '@ant-design/pro-card';

@observer
class RealTimer extends Component {
  @observable dateTime: string;

  @observable year: number;

  @observable month: number;

  @observable date: number;

  @observable day: number;

  @observable hour: number;

  @observable minute: number;

  @observable second: number;

  constructor(props: {}) {
    super(props);

    this.dateTime = moment().format('YYYY-MM-DD HH:mm:ss');
    this.year = moment(this.dateTime).year();
    this.month = moment(this.dateTime).month();
    this.date = moment(this.dateTime).date();
    this.day = moment(this.dateTime).day();
    this.hour = moment(this.dateTime).hour();
    this.minute = moment(this.dateTime).minute();
    this.second = moment(this.dateTime).second();
  }

  componentDidMount() {    
    setInterval(() => {
      this.handleGetTimes();
    }, 1000);
    
  }

  @action.bound
  handleGetTimes() {
    this.dateTime = moment().format('YYYY-MM-DD HH:mm:ss');
    this.year = moment(this.dateTime).year();
    this.month = moment(this.dateTime).month();
    this.date = moment(this.dateTime).date();
    this.day = moment(this.dateTime).day();
    this.hour = moment(this.dateTime).hour();
    this.minute = moment(this.dateTime).minute();
    this.second = moment(this.dateTime).second();
  }

  @computed
  get week() {
    const weekDescribeArr = ['一', '二', '三', '四', '五', '六', '日'];
    if(this.day) {
      return `星期${weekDescribeArr[this.day - 1]}`;
    }else {
      return '星期日';
    }
  }

  @computed
  get time() {    
    return moment(this.dateTime).format('HH:mm:ss');
  }

  @computed
  get hourPercent() {    
    return (100 / 24) * this.hour;
  }

  @computed
  get minutePercent() {    
    return (100 / 60) * this.minute;
  }

  @computed
  get secondPercent() {    
    return (100 / 60) * this.second;
  }
  
  render() {      
    return (
      <div style={{ maxWidth: '25%' }}>
        <Badge.Ribbon color="green" text={this.week}>
          <ProCard style={{ textAlign: 'center', maxWidth: '100%' }} hoverable bordered>
            <Progress
              type="circle"
              width={200}
              strokeWidth={2}
              strokeColor='#636e72'
              percent={this.secondPercent}
              format={() => {
                return (
                  <Progress
                    type="circle"
                    strokeColor='#74b9ff'
                    width={190}
                    strokeWidth={2}
                    percent={this.minutePercent}
                    format={() => {
                      return (
                        <Progress
                          type="circle"
                          strokeColor='#ff7675'
                          width={180}
                          strokeWidth={2}
                          percent={this.hourPercent}
                          format={() => this.time}
                        />
                      );
                    }}
                  />
                );
              }} 
            />
            <div style={{ marginTop: 8 }}>
              <Space>
                <Tag color='processing' style={{ marginRight: 0 }}>{this.year}</Tag>
                <span>年</span>
                <Tag color='processing' style={{ marginRight: 0 }}>{this.month}</Tag>
                <span>月</span>
                <Tag color='processing' style={{ marginRight: 0 }}>{this.date}</Tag>
                <span>日</span>
              </Space>
            </div>
          </ProCard>
        </Badge.Ribbon>
      </div>
    );
  }
}
 
export default RealTimer;